<template>
	<view class="container">
		<view class="spacer" style="height: 5rpx;"></view>
		<view class="nav">
			<view class="spacer" style="height: 50rpx;"></view>
			<view v-if="user" style="display: flex;align-items: center;margin-left: 50rpx;">
				<view style="width: 15vw;">
					<up-avatar size="50" :src="user.url"></up-avatar>
				</view>
				<view class="spacer" style="height: 50rpx;"></view>
				<up-text style="margin-left: 30rpx;" size=20 align="left" :bold="true" :text="user.username"></up-text>
			</view>
			<view v-else-if="user == null" style="display: flex;align-items: center;margin-left: 50rpx;">
				<view style="width: 15vw;">
					<up-avatar size="50" :src="tempUrl"></up-avatar>
				</view>
				<view class="spacer" style="height: 50rpx;"></view>
				<up-text @click="showPopup()" style="margin-left: 30rpx;" size=20 align="left" :bold="true"
					text="登录/注册"></up-text>
				<up-popup :show="show" :round="10" mode="bottom" @close="close" @open="open">
					<view class="spacer" style="height: 350rpx;">
						<view
							style="height: 150rpx;position: absolute; top: 50%;left: 50%;transform: translate(-50%, -50%);">
							<view @click="getUserInfo()"
								style="height: 100rpx;width: 450rpx;background: #bf0003;border-radius: 50rpx 50rpx 50rpx 50rpx;">
								<view class="spacer" style="height: 18rpx;"></view>
								<up-text align="center" color="#ffffff" size="25" prefixIcon="weixin-fill"
									iconStyle="font-size: 35px;color:#ffffff;" text="微信一键登录"></up-text>
							</view>
						</view>
						<view class="spacer" style="height: 535rpx;"></view>
						<view
							style="height: 50rpx; position: absolute; top: 85%;left: 50%;transform: translate(-50%, -50%);">
							<up-text mode="link" align="center" size="18" color="#000" text="点击查看规范条约"
								href="https://www.uviewui.com"></up-text>
						</view>
					</view>
				</up-popup>
			</view>
		</view>
		<view class="spacer" style="height: 30rpx;"></view>
		<view class="nav_bot">
			<view style="margin-left: 40rpx;">
				<view class="spacer" style="height: 40rpx;"></view>
				<up-text prefixIcon="bookmark-fill" :bold="true" size=20 iconStyle="font-size: 28px"
					text="我的活动"></up-text>
				<view class="spacer" style="height: 40rpx;"></view>
				<up-text prefixIcon="order" size=20 :bold="true" iconStyle="font-size: 28px" text="我的借阅"></up-text>
				<view class="spacer" style="height: 40rpx;"></view>
				<up-text prefixIcon="coupon-fill" :bold="true" size=20 iconStyle="font-size: 28px"
					text="我的积分"></up-text>
				<view class="spacer" style="height: 40rpx;"></view>
				<up-text prefixIcon="server-fill" :bold="true" size=20 iconStyle="font-size: 28px"
					text="联系我们"></up-text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				tempUrl: "https://ss0.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3655621348,1444233956&fm=253&gp=0.jpg",
				user: null
			}
		},
		onLoad() {

		},
		methods: {
			open() {
				console.log('open');
			},
			close() {
				this.show = false
				console.log('close');
			},
			showPopup() {
				this.show = true;
			},
			getUserInfo() {
				console.log("aaaa")
				uni.getUserProfile({
					desc: 'Wexin', // 这个参数是必须的
					success: res => {
						console.log("用户信息", res.rawData)
					}
				})
			},
			wxLogin() {
				uni.login({
					provider: 'weixin',
					withCredentials: true,
					success: rest => {
						console.log(rest);
						if (rest.code) {
							// 获取到用户的登录凭证code，可以将code发送给后端接口
							wx.getUserInfo({
								success: res => {
									console.log(res);
									const {
										rawData,
										signature,
										encryptedData,
										iv
									} = res;
									// 将rawData和signature作为参数发送给后端接口
									wx.request({
										url: 'http://localhost:8080/app/api/v1/wx/login',
										method: 'POST',
										data: {
											code: rest.code,
											rawData: rawData,
											signature: signature,
											encryptedData: encryptedData,
											iv: iv
										},
										success: res => {
											console.log(res.data);
											// 处理登录成功后的逻辑
										}
									});
								}
							});
						}
					}
				});
			}
		}
	}
</script>

<style>
	.container {
		padding: 10rpx;
		margin: 10rpx;
	}

	.nav {
		height: 40vh;
		width: 95vw;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 4rpx 4rpx 7rpx 7rpx rgba(0, 0, 0, 0.1);
	}

	.nav_bot {
		height: 30vh;
		width: 95vw;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 4rpx 4rpx 7rpx 7rpx rgba(0, 0, 0, 0.1);
	}

	.spacer {
		background-color: transparent;
	}
</style>